<template>
    <div class="cenbi">
        <div class="caovas" @drop="drop" @dragover="ondragover" ref="center">
            <div @contextmenu="handleContextMenu">
                <RotateIndex v-for="(item, index) in canvasComponents" :key="index" :id="item.id" :style="item.style">
                    <component :is="item.comName" :style="item.style" @mousedown="onmousedown(item.id)"
                        v-if="item.comName === 'MyImage'" :imgsrc="item.imgsrc" class="tateIndex">
                    </component>
                    <component v-else :is="item.comName" :style="item.style" @mousedown="onmousedown(item.id)">
                    </component>
                </RotateIndex>
            </div>
            <!-- @click="handleClick" -->
            <!-- <div class="image-container">
            <img :src="imageUrl"  />
        </div> -->
            <div class="btnleft" ref="CustomizeRight" v-show="showMenu">
                <button class="bh" @click="deleteItem">
                    删除
                </button>
            </div>

        </div>


    </div>



</template>
<script setup lang="ts">
//引入xuanzhuan的代码
import RotateIndex from '@/components/rOtate/index.vue'
import { ref, onMounted, watch, computed, onUnmounted } from 'vue'
import arr from '../utils/icondata'
import deepCopy from '../utils/deeyCopy'
//在用@符手打断;
import { nanoid } from 'nanoid'
import { useComponents } from '../stores/counter'
import { storeToRefs } from 'pinia'
import { defineProps } from 'vue'
import { } from '@/stores/counter'
const { DeleteCao } = useComponents()
import setPx from '@/utils/setPx.ts'//导入图片进行定位
// 定义接收的props  
//center 子   myw父
const canvas = ref(null);
const showMenu = ref(false);
const menuStyle = ref({ top: '0', left: '0' });
const CustomizeRight: any = ref(null)
const handleContextMenu = (e: any) => {
    console.log(e, "6666");

    e.preventDefault();

    CustomizeRight.value.style.left = (e.offsetX + 267.2) + 'px'
    CustomizeRight.value.style.top = (e.offsetY + 180) + 'px'
    console.log(CustomizeRight.value.style.left = (e.offsetX + 267.2) + 'px', "左");
    console.log(CustomizeRight.value.style.top = (e.offsetY + 180) + 'px', '右');
    showMenu.value = true;

};

const handleClick = () => {
    showMenu.value = false;
};

// 假设有一个删除操作的方法
const deleteItem = () => {
    // 执行删除操作
    DeleteCao()
};

// 监听删除操作
window.addEventListener('click', (event: any) => {
    if (showMenu.value && !event.target.matches('div')) {
        deleteItem();
        showMenu.value = false;
    }
});
const { style, imageUrl } = defineProps(["style", "imageUrl"])
const num = ref(10) // 初始化 num 值，可以根据需要使用
const { canvasComponents, currentcom }: any = storeToRefs(useComponents())
const { iconPushComponents, Operating, setStyle, SetLocalStorage, HuabuSize } = useComponents()
const center = ref()
const canvasStore = useComponents()
//导入画布
import { useCanvasStore } from '../stores/index'
const { setCanvasDom, setshow } = useCanvasStore()
//拖着你进入画布
const ondragover = (e: any) => {
    console.log(2222)
    e.preventDefault()
}
const drop = (e: any) => {
    console.log(111111)
    const index = e.dataTransfer.getData('index')
    console.log(index, 'index')
    let obj: any = arr.value[index]
    let res = deepCopy(obj)
    res.id = nanoid()
        ; (res.style.left = e.offsetX), (res.style.top = e.offsetY)
    res.style.zIndex = canvasComponents.value.length
    iconPushComponents(res)
    Operating(res.id)
    setshow(false)
}
//父组件
//按住下
let onmousedown = (id: any) => {
    console.log(id, 'EEEEE')
    const e: any = window.event
    e.stopPropagation()
    Operating(id)
    let startX = e.clientX
    let startY = e.clientY
    let startLeft = currentcom.value.style.left
    //仓库的值没有抛出  所以没有属性value
    let startTop = currentcom.value.style.top
    //绑定移动数据
    const onmousemove = (event: any) => {
        let moveX = event.clientX
        let moveY = event.clientY
        let newLeft = moveX - startX + startLeft
        let newTop = moveY - startY + startTop
        setStyle(currentcom.value.id, 'left', newLeft)
        //显示undefined
        setStyle(currentcom.value.id, 'top', newTop)
    }
    //高抬起事件
    const up = () => {
        document.removeEventListener('mousemove', onmousemove)
        document.removeEventListener('mouseup', up)
    }
    document.addEventListener('mousemove', onmousemove)
    document.addEventListener('mouseup', up)
}

onMounted(() => {
    setCanvasDom(center.value)
    let canvasComponents = localStorage.getItem('setcanvasComponents')
    if (canvasComponents) {
        //持久化
        SetLocalStorage(JSON.parse(canvasComponents))
    }
})


</script>

<style lang="scss" scoped>
.cenbi {
    width: 100%;
    height: 100%;
    display: flex;
    // background: #ee0707dc;
    align-items: center;
    justify-content: center;
    // overflow: hidden;
}

.caovas {
    width: 5.52rem;
    height: 3.86rem;
    position: relative;
    background-image: linear-gradient(to right, #ccc 2px, transparent 2px),
        linear-gradient(to bottom, #ccc 2px, transparent 2px);
    background-size: 20px 20px;
    /* 设定格子大小 */
    background-position: 0 0, 0 0;
    /* 确保背景从左上角开始 */
    background-repeat: repeat;
    /* 重复背景 */
}


.btnleft {
    position: absolute;
    background-color: #ccc;
    width: 100px;
    height: 200px;
    border-radius: 14%;
    justify-content: space-around;

}

.bh {
    width: 52px;
    height: 52px;
    // background: red;
    color: #000;
    font-weight: normal;
    text-align: left;
}

.image-container img {
    max-width: 300px;
    max-height: 150px;

}
</style>
